<script setup lang="ts">
import {Ref, ref,reactive} from "vue";
import request from "../../utils/request.ts";
import {layer} from "@layui/layui-vue";
const checkTab: Ref<string | undefined> = ref<string>()
const isTree = ref(true)
const collapseTransition = ref(false);
const selectedKey = ref("5")
const openKeys7 = ref(["7"])
const tableRef3 = ref();
const loadingData = ref(false);
const queryColumn = [
  {fixed:'left', title:"合同号", width: "100px", key:"loanNo" },
  {fixed:'left', title:"姓名", width: "80px", key:"customerName" },
  { title:"身份证号", key:"certificateNo", width: "100px" },
  {title:'电话',key:'tel',width:'80px'},
  {title:'当前委外公司',key:'outsourcingCompany',width:'80px'},
  {title:'委外时间',key:'outsourcingDate',width:'120px'},
  {title:'前委外公司',key:'beforeOutsourcingCompany',width:'80px'},
  {title:'前委外时间',key:'beforeOutsourcingDate',width:'80px'},
  {title:'委外次数',key:'outsourcingCount',width:'40px'},
  {title:'操作',key:'operation',width:'80px',customSlot:'operator',fixed:'right',ignoreExport:true}
]
const p2pNplmColumn = [
  {title:'合同号',key:'loanNo',width:'100px'},
  {title:'姓名',key:'loanName',width:'80px'},
  {title:'身份证号',key:'idNo',width:'100px'},
  {title:'合同金额',key:'loanAmount',width:'80px'},
  {title:'已还金额',key:'repayAmount',width:'80px'},
  {title:'还款类型',key:'repayType',width:'80px'},
  {title:'还款时间',key:'repayDate',width:'120px'}
  ]
const queryDate= ref();
const queryHistoryDate = ref();
const p2pNplmSource = ref([]);
const menuList = ref([
  {id:'1', title:'合同委外查询', closable: false},
  {id:'2', title:'其它业务查询-待完善'},
])
const formValue = reactive({
  loanNo: "",
})
const formValueHistory = reactive({
  loanNo: "",
})
/**
 * 切换tab 的时候将其制空
 * @param id
 */
const  selectMenu = (id:string) =>{
  checkTab.value=id;
  if(id === '1'){
    formValueHistory.loanNo= ""
    queryHistoryDate.value = "";
  }
  else {
    formValue.loanNo= ""
    queryDate.value= "";
  }
}
const formReset = () =>{
  formValue.loanNo = ""
}

const pageTotal = ref(100);
const selectValue = ref(null);
const queryByLoanNo = () =>{
  loadingData.value=true;
  loading.value = true;
  const queryValue = formValue.loanNo;
  const typeValue= selectValue.value;
  if(selectValue.value === null || selectValue.value === undefined){
    layer.msg("请选择业务类型",{icon:2,time:5000});
    loading.value = false;
    return;
  }
  if(queryValue === null || queryValue === undefined || queryValue === ""){
    layer.msg("请输入合同号",{icon:2,time:5000});
    loading.value = false;
    return;
  }
  request.requestPost('/api/query/queryList',{
    data:{},
    body:{queryValue,typeValue},
    headers:{
      'Content-Type': 'application/json'
    }
  }).then((res) =>{
    if(res.data.list === null || res.data.list === undefined) {
      layer.msg("未查询到数据，请检查合同号与业务类型是否正确！", {icon: 2, time: 5000});
      loading.value = false;
      queryDate.value = [];
      return;
    }
    queryDate.value=res.data.list;
    pageTotal.value=res.data.size
    loading.value = false;
  }).catch((err) =>{
    loading.value = false;
    queryDate.value = [];
    console.log(err);
  })
}
const page = reactive({ current: 1, limit: 10, total: pageTotal });
const loading = ref(false);
const handleView = (row:any) =>{
  constVisible.value = !constVisible.value;
  loading.value = true;
  //layer.msg("待数据开发请联系管理员",{icon:2,time:5000});
  const queryValue = row.loanNo;
  const typeValue= selectValue.value;
  request.requestPost('api/query/queryP2pNplmData',{
    data:{},
    body:{queryValue,typeValue},
    headers:{
      'Content-Type': 'application/json'
    }
  }).then((res) =>{
    if(res.data.list === null || res.data.list === undefined)
    {
      layer.msg("未查询到数据!", {icon: 2, time: 5000});
      p2pNplmSource.value =[];
      loading.value = false;
      return;
    }
    p2pNplmSource.value  = res.data.list;
    loading.value = false;
  }).catch((err) =>{
    p2pNplmSource.value =[];
    console.log(err);
  })
}
const constVisible = ref(false);
</script>

<template>
  <lay-layout class="index-content">
    <lay-header>
      <h1>委外数据查询系统</h1>
    </lay-header>
    <lay-layout>
      <lay-side>
        <lay-menu v-model:selected-key="selectedKey" :collapse-transition="collapseTransition" v-model:open-keys="openKeys7" v-model:tree="isTree"
                  class="layui-nav layui-nav-tree layui-nav-light">
          <lay-menu-item  v-for="menus in menuList" :id="menus.id" @click="selectMenu(menus.id)">
            <lay-icon type="layui-icon-home"></lay-icon>
            {{menus.title}}
          </lay-menu-item>
        </lay-menu>
      </lay-side>
      <lay-body>
        <div v-show="checkTab === '1'">
          <lay-form :model="formValue" :pane="true">
            <lay-form-item label="合同号" prop="loanNo" mode="inline">
              <lay-input v-model="formValue.loanNo" ></lay-input>
            </lay-form-item>
            <lay-form-item label="业务类型" prop="businessType" mode="inline">
              <lay-select v-model="selectValue" placeholder="请选择"  mode="inline">
                <lay-select-option :value="1" label="快信"></lay-select-option>
                <lay-select-option :value="2" label="利信"></lay-select-option>
              </lay-select>
            </lay-form-item>
            <lay-form-item mode="inline">
              <lay-space>
                <lay-ripple>
                  <lay-button type="primary" @click="queryByLoanNo">查询</lay-button>
                </lay-ripple>
                <lay-ripple>
                  <lay-button type="default" @click="formReset">重置</lay-button>
                </lay-ripple>
              </lay-space>
            </lay-form-item>
          </lay-form>
          <!--                @expand-change="expandRow"-->
          <lay-table
              height="80vh"
              ref="tableRef3"
              :page="page"
              :loading="loading"
              :default-toolbar="true"
              :columns="queryColumn"
              :data-source="queryDate">
            <template v-slot:operator="{ row }">
              <lay-button  @click="handleView(row)" type="normal">查看</lay-button>
            </template>
          </lay-table>
        </div>
        <div v-show="checkTab === '2' ">

        </div>
      </lay-body>
    </lay-layout>
  </lay-layout>
  <lay-layer v-model="constVisible" title="数据流水详情" :shade="false"  :area="['100%', '90%']">
    <div style="padding: 20px;">
      <lay-table :columns="p2pNplmColumn" :data-source="p2pNplmSource"></lay-table>
    </div>
  </lay-layer>
</template>

<style scoped>
@import url('css/index.css');
</style>